<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" >
        <thead>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>班级</th>
        </thead>
        <tbody>
           
        </tbody>
    </table>
    <script>
        var persons = [
            {id:1,username:'Nancy Townsend',age:18,gender:'男',class:'2304'},
            {id:2,username:'Angel Delgado',age:31,gender:'女',class:'2302'},
            {id:3,username:'Randall Wade',age:35,gender:'男',class:'2303'},
            {id:4,username:'Mabel Castro',age:9,gender:'女',class:'2301'},
            {id:5,username:'Steve Manning',age:67,gender:'男',class:'2306'}
        ]
           
        var content = persons.reduce(function(prev,item){
            return prev+
            `<tr>
                <td>${item.id}</td>
                <td>${item.username}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.class}</td>
            </tr>`
        },'');

        document.querySelector('tbody').innerHTML = content

        

        
    </script>
</body>
</html>